<template>
	<!-- 选项卡 -->
	<view class="cs-tabs">
		<view class="cs-tabs-item" :class="noteType == 1 ? 'cs-tabs-item_parent':''">
			<view :class='["cs-tabs-item-tc", index === changeIndex ? "active" : ""]' v-for="(item,index) in tabType" :key='index' @click="changeTabs(index)">{{item}}
				<text class="hr" v-show="index === changeIndex"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noteType:  uni.getStorageSync('noteType'), //1家长 2孩子 
				tabType: ['笔记', '文件夹', '试题笔记', '试卷笔记', '随堂笔记'],
				changeIndex: uni.getStorageSync('tabsIndex') || 0, // tabs索引值
			}
		},
		created() {
			if(this.noteType == 1) {
				this.tabType = ['笔记', '文件夹'];
			}
		},
		methods: {
			// 切换tabs
			changeTabs(changeIndex) {
				this.changeIndex = changeIndex;
				this.$emit('changeTabs', changeIndex);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cs-tabs{
		position: fixed;
		left: 0;right: 0;
		z-index: 2;
		background: #FFFFFF;
	}
	.cs-tabs-item{
		display: flex;
		white-space: nowrap;
		overflow: auto;
	}
	.cs-tabs-item_parent{
		justify-content: space-around;
	}
	.cs-tabs-item-tc{
		position: relative;
		padding: 16upx 32upx;
		font-size: 30upx;
		color: #999999;
	}
	
	// 激活样式
	.active{
		color: #FF9900;
	}
	.hr{
		position: absolute;
		width: 34upx;
		height: 4upx;
		right:0;left: 0;bottom: 0;
		margin: auto;
		background: #FF9900;
	}
</style>
